<template>
  <view class="myQRcode">
    <image class="titleImg" src="/static/image/mine/myQRcodeTitle.png" />
    <view class="codeBox">
      <view class="codeBox-top">
        <image class="user-info" :src="user.avatar" />
        <p>{{ user.nickname }}</p>
      </view>
      <image class="qrCode" :src="codeBase" @click="showCode" />
      <view class="opt">
        <button open-type="share" class="opt-item share">
          <image src="/static/image/mine/share.png" />
          <p>分享小程序</p>
        </button>
        <view class="opt-item" @click="download">
          <image src="/static/image/mine/download.png" />
          <p>保存二维码</p>
        </view>
      </view>
    </view>
    <view v-show="codeShow" class="showCode" @click="delCode">
      <image :src="codeBase" />
    </view>
  </view>
</template>

<script>
import { getQrcode } from '@api/mine'
import { get } from '@utils/storage'
export default {
  data() {
    return {
      codeShow: false,
      codeBase: '',
      user: []
    }
  },
  created() {
    getQrcode().then(res => {
      this.codeBase = res.data.data
    })
    this.user = get('jwt').user_info
  },
  methods: {
    download: function() {
      uni.getSetting({
        success: res => {
          if (res.authSetting['scope.writePhotosAlbum']) {
            this.saveImage()
          } else {
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success: () => {
                this.savImage()
              },
              fail: () => {
                uni.showToast({
                  title: '请允许保存权限，再点击保存二维码',
                  icon: 'none',
                  duration: 3000
                })
              }
            })
          }
        }
      })
    },
    showCode: function() {
      this.codeShow = true
    },
    delCode: function() {
      this.codeShow = false
    },
    saveImage: function() {
      const base64 = this.codeBase.replace(/^data:image\/\w+;base64,/, '')
      const filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png'
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      uni.getFileSystemManager().writeFile({
        filePath: filePath,
        data: base64,
        encoding: 'base64',
        success: res => {
          uni.saveImageToPhotosAlbum({
            filePath: filePath,
            success: function(_) {
              uni.hideLoading()
              uni.showToast({
                title: '保存成功，可进入相册查看',
                icon: 'none',
                duration: 2000
              })
            },
            fail: () => {
              uni.hideLoading()
            }
          })
        },
        fail: () => {
          uni.hideLoading()
        }
      })
    }
  },
  onShareAppMessage() {
    return {
      title: '我给你分享了一个小程序',
      path: '/pages/index/index',
      query: `agent=${this.user.uid}`
    }
  }
}
</script>

<style>
.myQRcode {
  position: relative;
  top: 0;
  left: 0;
  background-image: url('/static/image/mine/myQRcodeBg.png');
  height: 100vh;
  display: flex;
  flex-direction:column;
  align-items: center;
  overflow:auto;
}
.titleImg{
  width: 424rpx;
  height: 220rpx;
  margin-top: 66rpx;
  margin-bottom: 66rpx;
}
.codeBox-top {
  display: flex;
  box-sizing: border-box;
  font-size: 34rpx;
  font-weight: 600;
  align-items: center;
  width: 100%;
}
.user-info{
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}
.codeBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;
  width: 610rpx;
  height: 848rpx;
  border-radius: 20rpx;
  background-color: #FFFFFF;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.6);
  padding: 40rpx 60rpx;
}
.qrCode {
  width: 456rpx;
  height: 460rpx;
}

.opt {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.opt-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: #306DE9;
  height: 100rpx;
  background-color: transparent;
  padding: 0;
  line-height: normal;
  width: content;
  margin: 0;
}
button::after{
	border: none;
	background-color: transparent;
}
.opt-item>image {
  width: 48rpx;
  height: 48rpx;
}

.showCode {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.showCode>image {
  width: 95vw;
  height: 95vw;
}

</style>
